<template>
	<view>
		<!-- 歌词显示区 -->
		<view>
			<bing-lyric :lyrics="musicLyric" :lyricStyle="ric_style"
			:areaStyle="areaStyle" :curTime="playTime"></bing-lyric>
		</view>
		<!-- 音乐控件区域 -->
		<view class="music_control">
			<view>
				<icon type="#000000" class="iconfont icon-fill-left icon_size"></icon>
			</view>
			<view>
				<icon @click="playMusic" type="#000000" class="iconfont icon-bofang icon_size"
				 v-if="playShow"></icon>
				<icon @click="pauseMusic" type="#000000" class="iconfont icon-zanting icon_size"
				 v-else></icon>
			</view>
			<view>
				<icon type="#000000" class="iconfont icon-right icon_size"></icon>
			</view>
		</view>
	</view>
</template>

<script>
	import bingLiric from "@/components/bing-lyric/bing-lyric"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import {getMusUrl,getMuscWords} from '@/network/music.js'
	export default {
		data(){
			return {
				musicUrl:'',
				music:{},
				musicLyric:[],
				ric_style:{activeColor:'#F56C6C'},
				areaStyle:{height: 'calc(100vh - 220rpx)'},
				audio:{},
				playTime:0,
				playShow:true
			}
		},
		methods:{
			// 根据id获取音乐url
			getMusicUrl(id){
				getMusUrl(id).then(res => {
					// console.log(res)
					this.musicUrl = res.data.data[0].url
				})
			},
			// 获取音乐歌词
			getMuscWordsM(id){
				getMuscWords(id).then(res => {
					// console.log(res)
					this.musicLyric = res.data.lrc.lyric
					this.musicLyric = this.musicLyric.split('\n')
					// console.log(this.musicLyric)
				})
			},
			// 播放音乐
			playMusic(){
				this.audio.src = this.musicUrl
				this.audio.play()
				this.audio.loop = true
				this.audio.startTime = this.playTime
				this.playShow = false		
				this.audio.onTimeUpdate(() =>{
					this.playTime = this.audio.currentTime
				})
			},
			// 暂停音乐
			pauseMusic(){
				this.playShow = true
				this.playTime = this.audio.currentTime
				this.audio.pause()
			}
		},
		onLoad(data) {
			this.music = data
			this.audio = uni.createInnerAudioContext();
			this.getMusicUrl(data.id)
			this.getMuscWordsM(data.id)
			uni.setNavigationBarTitle({
				title:this.music.name
			})
		},
		onUnload() {
			this.audio.destroy()
		}
	}
</script>

<style lang="scss">
	.music_control{
		background-color: #8cc8b4;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 220rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		.icon_size{
			color: #F0F0F0;
			font-size: 60rpx;
		}
	}
</style>
